<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-24 08:46:02
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-05-29 11:52:06
 * @FilePath: \jzjypc4.0\src\views\ProductCenter\classOnline.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="tips">
      <el-dialog
        :visible.sync="dialogVisible"
        width="400px"
        :before-close="handleClose"
        :close-on-click-modal="true"
      >
        <h2>添加客服微信</h2>
        <img src="../../assets/img/images/cstom.png" alt="" />
        <p>添加客服微信，获取更多资讯</p>
      </el-dialog>
    </div>
    <div class="bread">
      <span >当前位置：</span>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/product' }"
          >产品中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="top">
      <div class="box1">
        <img src="../../assets/img/book.png" alt="" />
        <div class="msg">
          <div class="title">
            <span>高中语文</span>
            <h2>{{ title }}</h2>
          </div>
          <p>权威编者：{{ author }}</p>
          <span>{{ synopsis }}</span>
        </div>
        <div class="shenling" @click="getbook">点击咨询客服</div>
      </div>
    </div>
    <div class="content">
      <div class="ctTop">
        <span>视频详情</span>
      </div>
      <div class="videoBox">
        <video
          class="video"
          :src="contents"
          height="504px"
          width="900px"
          type="video/mp4"
          :poster="file_url"
          controls
          loop="-1"
          preload
          ref="startvideo"
        ></video>
        <div class="cover" v-if="playFlag"></div>
        <span @click="startvideo" v-if="playFlag">
            <img src="../../assets/img/play.png" alt="">
        </span>
      </div>
      <div class="productTips">
        <div class="title">产品特色</div>
        <div class="msg">
          <p>
            {{ characteristic }}
          </p>
        </div>
      </div>
      <div class="teachers">
        <div class="title">讲师介绍</div>
        <div class="msg">
          <img src="../../assets/img/touxiang.webp" v-if="!author_file_url" />
          <img :src="author_file_url" v-if="author_file_url" />
          <div class="right">
            <h3>{{ author }}</h3>
            <p>{{ professional }}</p>
          </div>
        </div>
        <div class="introduct">
          <p>{{ authorinfo }}</p>
        </div>
      </div>
      <div class="biaoji"></div>
      <div class="seemore">
        <!-- <div class="title">了解更多</div> -->
        <p>
          添加客服微信联系方式，获取更多资源福利内容，并且及时推送最新资源和反馈消息
        </p>
        <span class="shenling" @click="getbook">点击咨询客服</span>
      </div>
    </div>
    <div class="footer" @click="advert">
      <img :src="advert_file_url" alt="" />
    </div>
  </div>
</template>

<script>
import { bookdetail } from "../../api/http";
export default {
  data() {
    return {
      classId: "", //课程id
      dialogVisible: false, //展示框的现实隐藏
      title: "", //名称
      author: "", //主持人名称,讲师
      author_file_url:'',//讲师头像
      authorinfo: "", //讲师介绍
      professional: "", //讲师职称
      synopsis: "", //简介
      file_url: "", //封面
      contents: "", //详情
      characteristic: "", //产品特色
      advert_file_url:"",//广告图地址
      advert_http_url:'',//广告链接地址
      playFlag: true,
    };
  },
  created() {
    console.log(this.$route.query.id);
    this.classId = this.$route.query.id;
    //获取课程详情
    bookdetail({
      md5key: localStorage.getItem("md5key"),
      id: this.classId,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "课程详情");
        const data = res.retRes;
        this.title = data.title; //名称
        this.author = data.author; //主持人名称,讲师
        this.authorinfo = data.authorinfo; //讲师介绍
        this.professional = data.professional; //讲师职称
        this.synopsis = data.synopsis; //简介
        this.file_url = data.file_url; //封面
        this.contents = data.contents; //详情
        this.characteristic = data.characteristic; //产品特色
        this.advert_file_url = data.advert_file_url;//广告图地址
        this.advert_http_url = data.advert_http_url//广告链接地址
        this.author_file_url = data.author_file_url
      }
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //粘性定位咨询客服按钮
    handleScroll() {
      let seemore = document.getElementsByClassName("seemore")[0];
      let box = document.getElementsByClassName("biaoji")[0];
      const offset = box.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      //进入可视区
      if (offsetTop < window.innerHeight && offsetBottom > 0) {
        seemore.style.position = "relative";
      } else {
        seemore.style.position = "fixed";
      }
    },
    //客服弹窗关闭
    handleClose() {
      this.dialogVisible = false;
    },
    //客服弹窗激活
    getbook() {
      this.dialogVisible = true;
    },
    //视频播放按钮
    startvideo() {
      console.log(this.$refs.startvideo);
      this.$refs.startvideo.play();
      this.playFlag = false;
    },
    //打开广告链接
    advert(){
      window.open(this.advert_http_url,"_blank")
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator{
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  height: 100%;
  background-color: #f0f0f5;
  .tips {
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    h2 {
      padding: 50px 0;
      font-size: 20px;
      color: #fff;
      background-color: #46e2b4;
      border-radius: 20px 20px 0px 0px;
    }
    img {
      margin: 40px 0 20px 0;
      width: 200px;
      height: 200px;
    }
    p {
      padding-bottom: 45px;
      font-size: 16px;
      text-align: center;
    }
  }
  .bread {
      display: flex;
      margin: 20px auto;
      width: 1200px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      // font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
        /deep/.el-breadcrumb__inner.is-link {
          font-weight: normal;
        }
      }
    }
  .top {
    .box1 {
      margin: 20px auto;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      background-color: #fff;
      width: 1200px;
      height: 150px;
      cursor: pointer;
      img {
        margin: 20px;
        width: 84px;
        height: 110px;
      }
      .msg {
        flex: 1;
        height: 140px;
        .title {
          display: flex;
          margin: 20px 0;
          font-weight: 600;
          h2 {
            font-size: 16px;
            color: #333333;
          }
          span {
            margin-right: 6px;
            text-align: center;
            width: 64px;
            height: 20px;
            background: #7393f0;
            border-radius: 4px;
            font-size: 14px;
            color: #fff;
          }
        }
        p {
          margin-bottom: 25px;
          font-size: 13px;
          color: #666;
        }
        span {
          display: inline-block;
          color: #666;
        }
      }
      .shenling {
        margin-right: 30px;
        width: 120px;
        height: 40px;
        background: #f85230;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        line-height: 40px;
        font-size: 16px;
      }
    }
  }
  .content {
    margin: 0 auto;
    width: 1200px;
    background: #ffffff;
    border: 1px solid #dee0e3;
    overflow: hidden;
    .ctTop {
      border-bottom: 1px solid #dee0e3;
      span {
        display: inline-block;
        line-height: 38px;
        width: 120px;
        height: 38px;
        background: #08a579;
        color: #fcfcfc;
        text-align: center;
        font-size: 14px;
      }
    }
    .videoBox {
      position: relative;
      margin: 30px auto;
      width: 1140px;
      // height: 640px;
      text-align: center;
      video {
        object-fit: fill;
      }
      .cover {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 900px;
        height: 504px;
        background: rgba(0, 0, 0, 0.5);
      }
      span {
        display: inline-block;
        position: absolute;
        top: 45%;
        left: 46%;
        transform: translateX(-50%);
        transform: translateY(-50%);
        width: 77px;
        height: 77px;
        line-height: 77px;
        text-align: center;
        font-size: 50px;
        color: #fff;
        // border: 5px solid #ccc;
        border-radius: 100%;
        cursor: pointer;
      }
      span:hover {
        color: blue;
      }
    }
    .title {
      padding-left: 20px;
      height: 40px;
      background: #f0f2f5;
      font-size: 16px;
      color: #333;
      line-height: 40px;
      font-weight: 900;
    }
    .productTips {
      width: 1200px;
      .msg {
        margin: 30px auto;
        p {
          margin-left: 30px;
          color: #646566;
          font-size: 14px;
        }
      }
    }
    .teachers {
      .msg {
        display: flex;
        align-items: center;
        margin: 20px 0 20px 20px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          border: 1px solid #e6e6e6;
        }
        .right {
          margin-left: 20px;
          h3 {
            // margin: 10px 0;
            margin-bottom: 10px;
            font-size: 16px;
            color: #323233;
          }
          p {
            font-size: 14px;
            color: #646566;
          }
        }
      }
      .introduct {
        padding-bottom: 30px;
        border-bottom: 1px solid #dee0e3;
        p {
          margin-left: 30px;
          color: #646566;
          font-size: 14px;
        }
      }
    }
    .biaoji {
      width: 1200px;
    }
    .seemore {
      position: fixed;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0;
      //   top: 0;
      width: 1200px;
      background-color: #fff;
      p {
        margin-left: 20px;
        font-size: 14px;
        color: #646566;
        line-height: 60px;
      }
      .shenling {
        margin-right: 30px;
        width: 120px;
        height: 40px;
        background: #f85230;
        border-radius: 4px;
        text-align: center;
        color: #fff;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .footer {
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 60px;
    width: 1200px;
    img {
      width: 1200px;
      height: 160px;
    }
  }
}
</style>